<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <span>所有客户的订单详情</span>
          <button style="float: right" @click="cx()">按条件查询</button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="list">
          <el-table-column prop="ordid" label="订单号"> </el-table-column>

          <el-table-column prop="phone" label="电话"> </el-table-column>

          <el-table-column prop="nickname" label="收货人"> </el-table-column>

          <el-table-column prop="amount" label="总价"> </el-table-column>

          <el-table-column prop="ispay" label="是否付">
			  <template #default="scope">
				  {{ scope.row.ispay == '0' ? '未付款' : '已付款' }}
			  </template>
		  </el-table-column>

          <el-table-column prop="shipno" label="发货订单"> </el-table-column>

          <el-table-column prop="addr" label="发货地址"> </el-table-column>

          <el-table-column prop="tcreate" label="下单时间">
            <template #default="scope">
              {{ filters(scope.row.tcreate) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template #default="scope">
              <el-popover placement="left" :width="600" trigger="click">
                <template #reference>
					<div style="float: left;">
						 <el-button @click="btn(scope.row.ordid)">明细</el-button>
					</div>
                </template>
				
                <p>{{ scope.row.ordid }}#订单详情 发往:</p>

                <el-table :data="lists">
                  <el-table-column label="图片" width="100">
                    <template #default="scope">
                      <img
                        :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`"
                        style="width: 50px"
                      />
                      <!-- {{scope.row.picture}} -->
                    </template>
					
                  </el-table-column>

                  <el-table-column prop="name" label="商品名称" width="200">
                  </el-table-column>

                  <el-table-column prop="price" label="商品价钱" width="100">
                  </el-table-column>

                  <el-table-column prop="num" label="商品数量" width="100">
                  </el-table-column>

                  <el-table-column label="小计" width="100">
                    <template #default="scope">
                      <span>
                        {{ scope.row.num * scope.row.price }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
			  <!--  -->
			  <button style="float:left;line-height: 35px;margin-left: 20px;border: none;" v-if="scope.row.ispay" @click="btns(scope.row)">发货</button>
            </template>
          </el-table-column>
		  <!--  -->
		  <!--  -->
        </el-table>
      </el-main>
      <!--  -->
      <el-dialog v-model="dialogTableVisible" width="30%">
        <span @click="cx()" style="position: absolute; top: 8%; left: 38%; font-size: 18px"
          >按条件查询订单</span
        >
        <div>
          <div
            style="
              margin: 0 auto;
              display: flex;
              justify-content:  space-around;
              line-height: 40px;
              text-align: center;
            "
          >
            <div>
              <el-date-picker v-model="value1" type="date">
                
              </el-date-picker>
            </div>

            <div>
              <el-date-picker v-model="value2" type="date">
                
              </el-date-picker>
            </div>
          </div>
          <div
            style="
              margin: 0 auto;
              display: flex;
              justify-content: center;
              line-height: 40px;
              text-align: center;
              width: 96%;
            "
          >
            <el-input v-model="shdh" placeholder="收获电话" />
          </div>
          <div
            style="
              margin: 0 auto;
              display: flex;
              justify-content: center;
              line-height: 40px;
              text-align: center;
              width: 96%;
            "
          >
            <el-input v-model="shr" placeholder="收货人" />
          </div>
          <div style="text-align: center; margin-top: 40px">
            <el-button @click="qx()">取消</el-button>
            <!-- <el-button type="primary" @click="toLogin()">确定</el-button> -->
            <el-button :plain="true" type="primary" @click="cxs()"
              >查询</el-button
            >
          </div>
        </div>
      </el-dialog>
      <!--  -->
      <el-pagination
        layout="prev, pager, next"
        :total="lengths" 
		@current-change="ceshi"
      ></el-pagination>
    </el-container>
	<!--  -->
	<el-dialog v-model="fahuo" width="30%">
	  <span style="position: absolute; top: 8%; left: 47%; font-size: 18px"
	    >发货确认</span
	  >
	  <div>
	    <el-form >
	      <div style=" line-height: 40px; text-align: center">
	        <label style="width: 12%; background-color: ">输入发货单号</label>
	        <div style="width: 90%">
	          <el-input autocomplete="off" v-model="shipno"></el-input>
	        </div>
	      </div>
	      <div style="text-align: center; margin-top: 40px">
	        <el-button @click="quxiao()">取消</el-button>
	        <!-- <el-button type="primary" @click="toLogin()">确定</el-button> -->
	        <el-button :plain="true" type="primary" @click="toLogin()"
	          >确定</el-button
	        >
	      </div>
	    </el-form>
	  </div>
	</el-dialog>
  </div>
</template>

<script>
// 拦截器
import instance from "../../ajax/index.js";
//
// import { defineComponent, ref, reactive, toRefs } from "vue";

export default {
  name: "TypeFar",
  data() {
    return {
	  //获取当前时间
	  value1:"",
	  value2:"",
	  // 
      list: [],
      lists: [],
      //打开小窗口
      dialogTableVisible: false,
      // 收货电话
      shdh: "",
      // 收获人
      shr: "",
      // 实验
      sy: [],
	  // 所有订单
	  // 
	  lengths:0,
	  // 发货开关
	  fahuo:false,
	  // 发货单号临时
	  shipno:"",
	  // 
	  ordid:'',
    };
  },
  mounted() {
  	this.getCurrentTime();
  },
  // 组件创建之后
  created() {
	this.create();
	instance
	.post("/api/fore/ord/findOrdLineByPage/0/10")
	.then((res)=>{
		// 请求
		console.log(res);
	}).catch((error)=>{
		console.log(error);
	})
  },
  methods: {
	create(){
		instance
		  .post("/api/adm/ord/findOrdInfo/1/10")
		  .then((res) => {
		    // 请求成功
		    if (res.status === 200) {
		      this.list = res.data.data.orders;
			  this.lengths = res.data.data.total-10;
		      console.log(this.list);
		      console.log(res);
		    }
		  })
		  .catch((error) => {
		    console.log(error);
		  });
	},
    btn(s) {
      console.log(s);
      //http://127.0.0.1:8093/api/adm/ord/findItemInfoByOrdid/151
      instance
        .post("/api/adm/ord/findItemInfoByOrdid/" + s + "")
        .then((res) => {
          // 请求成功
          console.log(res.data);
          if (res.data.code == 200) {
            this.lists = res.data.data;
            console.log(this.lists);
          }
          // console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
	btns(s){
		this.fahuo = true;
		console.log(s);
		this.shipno = s.shipno;
		this.ordid = s.ordid;
	},
    cx() {
      console.log(this.list);
      this.dialogTableVisible = true;
	  this.shdh = '';
	  this.shr  = '';
    },
    cxs() {
		let time1 = this.value1.getTime();
		let time2 = this.value2.getTime();
		let obj = {
			ispay:1,
			tstart:time1,
			tend:time2,
			account:"tom",
			nickname:"15151",
		}
		  // consol.log(this.file.raw.File);
		  let str = [];
		  this.axios.post('/api/adm/ord/findOrdInfo/0/'+this.lengths,obj).then((res)=>{
		  	console.log(res.data.data.orders);
		  	for(let index in res.data.data.orders){
				if(time1 <= res.data.data.orders[index].tcreate && res.data.data.orders[index].tcreate <= time2 && res.data.data.orders[index].nickname == this.shr && this.shdh == res.data.data.orders[index].phone){
					console.log(res.data.data.orders[index]);
					str.push(res.data.data.orders[index]);
				}
		  	}
			this.lengths = str.length;
			this.list = str;
		  }).catch((error)=>{
		  	console.log(error)
		  })
    },
    // 取消
    qx() {
      this.dialogTableVisible = false;
	  this.getCurrentTime();
    },
	// 
	quxiao(){
		this.fahuo = false;
	},
	// 
	toLogin(){
		// console.log(this.ordid);
		// console.log(this.shipno);
		let that = this;
		let obj = {
		  ordid: that.ordid,
		  shipno: that.shipno
		};
		this.axios
		.post("/api/adm/ord/addShip", obj, {
		})
		.then((res) => {
		    console.log(res);
			// this.dialogTableVisible = false;
			// this.zhuangtai = true;
		})
		.catch((error) => {
		  console.log(error);
		});
		this.fahuo = false;
		this.create();
	},
	// 
	// 获取当前系统时间
	getCurrentTime() {
	  //获取当前时间并打印
	  let yy = new Date().getFullYear();
	  let mm = new Date().getMonth()+1;
	  let dd = new Date().getDate();
	  let hh = new Date().getHours();
	  let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
	  let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
	  let time = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
	  // 获取当前时间
	  this.currentTimes = time;
	  this.currentTimess= time;
	 },
	 ceshi(s){
		 console.log(s);
		 instance
		   .post("/api/adm/ord/findOrdInfo/"+s+"/10")
		   .then((res) => {
		     // 请求成功
		     if (res.status === 200) {
		       this.list = res.data.data.orders;
		       // this.sy = res.data.data;
		     }
		   })
		   .catch((error) => {
		     console.log(error);
		   });
		   // 
	 }
  },
  computed: {
    filters() {
      return (x) => {
        let year = new Date(x).getFullYear();
        let month = new Date(x).getMonth() + 1;
        let day = new Date(x).getDate();
        return year + "-" + month + "-" + day;
      };
    },
  },
};
</script>

<style scoped></style>
